<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>预约停车</title>
    <script type="text/javascript" src="./js/vue.js"></script>
    <script type="text/javascript" src="./js/axios.js"></script>

    <style>
        .parking-space {
            width: 240px;
            height: 240px;
        }

        .parking-space:hover {
            box-shadow: 2px 4px 6px #000; /*鼠标进入显示阴影*/
        }

        .locked {
            background: red;
        }

        .unlocked {
            background: green;
        }
    </style>
</head>
<body>
<main id="app">
    <h3>车位示意图</h3>
    <div class="parking-space" v-bind:class="parkingSpace.locked?'locked':'unlocked'" title="点击并没什么用">
        车位编号：<strong>{{parkingSpace.id}}</strong><br/>
        是否锁定：<strong>{{parkingSpace.locked}}</strong><br/>
        启用时间：<strong>{{parkingSpace.startTime}}</strong><br/>
        车位状态：<strong>{{parkingSpace.status}}</strong><br/>
    </div>
    <hr/>

    <div>
        <h3>车位状态</h3>
        <label for="id">车位编号</label><input v-model="id" id="id" type="number" value=""/>
        <button v-on:click="findById(id)">查看该车位状态</button>
    </div>
    <hr/>

    <div>
        <h3>停车</h3>
        <button v-on:click="reserve">预约车位（用户用）</button>
        <br/>
        <button v-on:click="reserveUnlock">解锁预约车位（用户用）</button>
        <br/>
        <button v-on:click="parking">停车（传感器用）</button>
        <br/>
        预约剩余时间：<span v-text="reserveTime">0</span>秒
        <br/>
        停车时长: <span v-text="time">0</span>秒
    </div>
    <hr/>

    <div>
        <h3>费用</h3>
        <span v-text="payMoney">0</span>元
        <button v-on:click="getCost">查看计费状态（用户用）</button>
    </div>
    <hr/>

    <div>
        <h3>缴费</h3>
        <label for="money">金额</label><input v-model="money" id="money" type="number" value=""/>
        <button v-on:click="pay">确认缴费（用户用）</button>
    </div>
</main>
<hr/>
<a href="index.html" target="_blank">所有车位实时状态页面</a><br/>
<a href="path.html" target="_blank">车位导航页面</a>

<script>
    var timerOutId;
    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
    var app = new Vue({
        el: "#app",
        data: {
            id: "",//选择的车位
            time: 0,//停车持续时间，秒
            reserveTime: 0,//预约剩余时间，秒

            payMoney: 0,//需要支付的钱数
            money: 0,//输入的钱数

            timerEnable: false,//
            parkingSpace: {id: null, locked: false, startTime: null, status: 0}
        },
        methods: {
            findById: function (id) {//查找一个车位信息，用于刷新页面车位信息
                if (id == null || id == "") {
                    return;
                }
                var that = this;
                axios.get("http://localhost:8080/park/" + id).then(
                    function (response) {
                        that.parkingSpace = response.data;
                    }, function (err) {
                        console.log(err);
                    }
                );
            },

            reserve: function () {//预定
                var that = this;
                axios({
                    method: "post",
                    url: "http://localhost:8080/park/reserve",
                    params: {
                        id: this.id//this.id == "" ? null : this.id,
                    }
                }).then(
                    function (response) {
                        alert(response.data.msg);
                        if (response.data.flag) {
                            that.id = response.data.res.id;
                            that.parkingSpace = response.data.res;

                            var reserveId = that.id;
                            that.timerEnable = true;
                            that.reserveTime = 60;//预定时 倒计60秒
                            timerOutId = setTimeout(
                                function () {
                                    that.timerEnable = false;
                                    that.findById(reserveId);
                                }, 60 * 1000 + 200);
                        }
                    }, function (err) {
                        console.log(err);
                    }
                );
            },

            reserveUnlock: function () {//解锁预定
                var that = this;
                axios({
                    method: "post",
                    url: "http://localhost:8080/park/reserveUnlock",
                }).then(
                    function (response) {
                        alert(response.data.msg);
                        if (response.data.flag) {
                            that.id = response.data.res.id;
                            that.parkingSpace = response.data.res;

                            that.reserveTime = 0;
                            that.timerEnable = false;
                            clearTimeout(timerOutId);
                        }
                    },
                    function (err) {
                        console.log(err);
                    }
                );
            },

            parking: function () {//停车
                if (this.id == null || this.id == "") {
                    alert("请选择车位");
                    return;
                }
                var that = this;
                axios({
                    method: "post",
                    url: "http://localhost:8080/park",
                    params: {
                        id: this.id,
                    }
                }).then(
                    function (response) {
                        alert(response.data.msg);
                        if (response.data.flag) {
                            that.timerEnable = true;
                            that.parkingSpace = response.data.res;
                        }
                    },
                    function (err) {
                        console.log(err);
                    }
                );
            },

            getCost: function () {//查看实时费用
                if (this.id == null || this.id == "") {
                    alert("请选择车位");
                    return;
                }
                var that = this;
                axios.get("http://localhost:8080/park/cost/" + this.id).then(
                    function (response) {
                        alert(response.data.msg);
                        that.payMoney = response.data.res;
                    },
                    function (err) {
                        console.log(err);
                    }
                );
            },

            pay: function () {//缴费
                if (this.id == null || this.id == "") {
                    alert("请选择车位");
                    return;
                }
                var that = this;
                axios({
                    method: "post",
                    url: "http://localhost:8080/park/cost",
                    params: {
                        id: this.id,
                        money: this.money
                    }
                }).then(
                    function (response) {
                        alert(response.data.msg);
                        if (response.data.flag) {
                            that.timerEnable = false;
                            that.payMoney = 0;
                            that.time = 0;
                            that.parkingSpace = response.data.res;
                        }
                    },
                    function (err) {
                        console.log(err);
                    }
                );
            },

            refreshTime: function () {
                if (!this.timerEnable || this.parkingSpace == null || this.parkingSpace.startTime == null) {
                    return;
                }

                var startTime = new Date(this.parkingSpace.startTime.replace(/-/g, "/"));
                var seconds = Math.floor((new Date().getTime() - startTime.getTime()) / 1000);
                seconds = Math.abs(seconds);//取绝对值
                var t;//计算距离startTime的时间
                if (seconds < 60) {
                    t = seconds;
                } else if (seconds < 3600) {
                    t = Math.floor(seconds / 60) + "分" + seconds % 60;
                } else {
                    var minutes = Math.floor(seconds / 60);
                    t = Math.floor(minutes / 60) + "时" + minutes % 60 + "分" + seconds % 60;
                }
                if (this.parkingSpace.status == 1) {//占用状态
                    this.payMoney = seconds >= 0 ? Math.floor(seconds / 60) : 0;
                    this.time = t;
                } else if (this.parkingSpace.status == 2) {//预定状态
                    this.reserveTime = t;
                }
            }
        }
    });

    window.onload = function () {
        setInterval(function () {
            app.refreshTime();
        }, 1000);
    }
</script>
</body>
</html>